前一天是以一個物件轉出轉入的效果
如果是改為每幾秒產生一個物件
就需要使用 陣列 記錄每一個 物件常值

var ary = [];

把 setInterval() 分三個部分執行
基本執行內容 => 產生物件常值 => 物件運算、判斷

setInterval(function(){
  // 基本執行內容
  // 跟前一篇的內容(除了運算以外)一樣
},10);

setInterval(function(){
  // 產生物件常值
},10);

setInterval(function(){
  // 物件運算、判斷
},1000);

基本執行內容

setInterval(function(){
  ctx.clearRect(0, 0, 400, 400);
  for(var i=0; i < ary.length; i++){
    ctx.save();
    ctx.translate(200, 200);
    ctx.rotate(ary[i].angle *Math.PI/180);
    ctx.fillStyle = ary[i].color;
    ctx.fillRect(ary[i].radius, ary[i].radius, ary[i].item_size, ary[i].item_size);
    ctx.restore()
  }
},10)

產生物件常值

為物件建立一個執行個體時，就可以使用物件常值標記法。
https://msdn.microsoft.com/zh-tw/library/202863ha(v=vs.94).aspx#Anchor_1

物件的角度、半徑、大小、顏色設定

setInterval(function(){
  var rect = {angle: 0, 
              radius: 100, 
              item_size: 10, 
              color:"rgb(" + getrandom() + ", " + getrandom() + ", " + getrandom() + ")"}
  ary.push(rect);  
}, 3000);

// 隨機數值
function getrandom(){
  return parseInt(Math.random()*255);
}

物件運算、判斷

把每個陣列中的物件取出運算變更值、條件判斷之後執行或移出陣列

setInterval(function(){
  for(var i=0; i < ary.length; i++){

    // 當 radius < 5 時 移除這個物件
    if(ary[i].radius < 5 ){
      ary.splice(i,1);
    }

    ary[i].angle +=1;
    ary[i].radius -= 0.1;
    ary[i].item_size -= 0.01;
    }
  }
},10)

基本執行內容 => 產生物件常值 => 物件運算、判斷
這三個 setInterval() 執行的時間周期不同、效果也很不同
以下方的例子 秒數愈小跑愈快

setInterval(function(){ // 基本執行內容 },10);

setInterval(function(){ // 物件運算、判斷 },10);

setInterval(function(){ // 產生物件常值 },50);

setInterval(function(){ // 基本執行內容 },50);

setInterval(function(){ // 物件運算、判斷 },50);

setInterval(function(){ // 產生物件常值 },1000);

setInterval(function(){ // 基本執行內容 },500);

setInterval(function(){ // 物件運算、判斷 },50);

setInterval(function(){ // 產生物件常值 },500);

當 setInterval() 分多個依序執行時
要注意不可分太多
除了很有可能會出錯外
因為每執行一個就會佔掉一部分的記憶體

所以當 setInterval() 執行會變慢時
可以改用 "clearInterval 清除" 或者是 "setTimeout 時間到才執行一次" 解決佔掉太多記憶體的問題

var time = setInterval(function() { ... }, 1000);
clearInterval(time);